<template>
    <div class="cinema">
        <div class="title">
            <div class="fanhui iconfont icon-fanhui" @click="jump" style="line-height: 50px; padding-left: 10px">返回
            </div>
            <div class="title-name">{{ list.cinemaName }}</div>
            <div class="bx"></div>
        </div>
        <div class="cinema-name" @click="tocinemamap(list.cinemaId)">
            <h3>{{ list.cinemaName }}</h3>
            <p>{{ movie.addr }}</p>
        </div>
        <div class="movie-banner">
            <ul>
                <li v-for="(item, index) in list.movies" :key="index">
                    <!-- item.id 影片id -->
                    <img :src="item.img" alt="" @click="title(index)">
                </li>
            </ul>

        </div>


        <div class="movie-name">
            <p>{{ titles.nm }} {{ titles.sc }}</p>
            <p>{{ titles.desc }}</p>
        </div>
        <div class="movietime">
            <ul>
                <li v-for="(item, indexs) in titles.shows" :key="indexs">
                    <ul>
                        <li v-for="(items, index) in item.plist" :key="index">
                            <div class="movie-box">
                                <div class="movietime-one">
                                    <p>{{ items.tm }}</p>
                                </div>
                                <div class="movietime-two">
                                    <p>{{ items.lang }} {{ items.tp }}</p>
                                    <p>{{ items.th }}</p>
                                </div>
                                <div class="movietime-three">
                                    <p>￥{{ items.baseSellPrice }} <span v-if="items.vipPriceName">{{ items.vipPriceName
                                    }}</span><span v-if="items.vipPrice">{{ items.vipPrice }}</span></p>
                                    <p>{{ items.extraDesc }}</p>
                                </div>
                                <div class="movietime-four">
                                    <p @click="set(indexs, index)"> 购票</p>
                                </div>
                            </div>
                            <hr>
                        </li>
                    </ul>

                </li>
            </ul>
            <!-- <div class="boxx">

            </div> -->
        </div>
    </div>

</template>

  
<script>

import { mapState } from 'vuex';
export default {
    name: 'LastprojectCinemaDetail',

    data() {
        return {
            list: [],
            movie: [],
            titles: [],
        };
    },
    methods: {
          tocinemamap(cinemaId) {
      this.$router.push("/cinemadetail2/" + cinemaId);
    },
        // 正在上映的电影列表
        // https://apis.netstart.cn/maoyan/cinema/shows?cinemaId=17166&ci=1&channelId=4
        // 详情
        // https://apis.netstart.cn/maoyan/cinema/detail?cinemaId=17166
        //超值套餐   https://apis.netstart.cn/maoyan/cinema/queryDealList.json
        async getmovielist() {
            await this.axios
                .get(`https://apis.netstart.cn/maoyan/cinema/shows?cinemaId=${this.id}&ci=1&channelId=${this.cityid}`)
                .then((re) => {
                    console.log("电影列表");
                    console.log(re);
                    this.list = re.data.data
                    // 初始化
                    this.titles = this.list.movies[0]

                });
        },

        // 用组件传值进去写
        async moviedetail() {
            await this.axios
                .get(`https://apis.netstart.cn/maoyan/cinema/detail?cinemaId=${this.id}`)
                .then((re) => {
                    console.log("电影院详情");
                    console.log(re);
                    this.movie = re.data.data

                });
        },
        async taocan() {
            await this.axios
                .get(`https://apis.netstart.cn/maoyan/cinema/queryDealList.json`)
                .then((re) => {
                    console.log("套餐");
                    console.log(re);
                });
        },
        title(r) {
            console.log(r);
            this.titles = this.list.movies[r]
            console.log(this.titles);

        },
        // 根据下标值获取对应信息
        set(indexs, index) {
            // console.log(indexs,index);
            // console.log( this.titles);
            // console.log( this.titles.shows[indexs].plist[index]);
            // this.$router.push("/choose/" + list)
            this.$router.push({
                name: 'choose',
                params: {
                    titles: this.titles,
                    list: this.titles.shows[indexs].plist[index],
                    name: this.list.cinemaName
                }
            })
        },
        jump() {
            this.$router.go(-1);
        }


    },
    computed: {
        ...mapState(["cityid"])
    },
    props: {
        id: {
            type: String,
            default: ""
        }
    },
    created() {
        this.taocan();
        this.moviedetail();
        this.getmovielist();

    },
};
</script>

<style lang="scss" scoped>
.title {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: red;
z-index: 99;
    display: flex;
    text-align: center;
    line-height: 50px;
    justify-content: space-between;
    color: white;
}

.bx {
    width: 42px;
    height: 50px;
}

.cinema-name {
    width: auto;
    margin-left: 10px;
    height: 50px;
    margin-top: 60px;
    margin-top: 62px;
}

.boxx {
    height: 35px;
    width: 100%;
}

.cinema-name>p {
    margin-top: 10px;
    font-size: 10px;
    color: grey;
    overflow: hidden;
    /*溢出的部分隐藏*/
    white-space: nowrap;
    /*文本不换行*/
    text-overflow: ellipsis;
    /*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
}

.cinema .movie-banner ul {
    // display: flex;
    // overflow-x: scroll;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 100%;
    list-style-type: none;
    display: flex;
    align-items: center;


}

.cinema .movie-banner ul li {
    // width: 150px;
    // height: 50px;


    width: 80px;
    height: 100px;
    flex: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

.cinema .movie-banner ul li img {
    width: 100%;
}

.cinema .movie-banner ul>li:nth-child(n + 2) {
    margin-left: 10px;
}

.cinema .movie-name {
    margin-top: 15px;
    width: 100%;
    height: 70px;
    text-align: center;
}

.cinema .movie-name p {
    margin-bottom: 5px;
}

.cinema .movietime .movie-box {
    display: flex;
    padding-top: 5px;
}

.cinema .movietime .movie-box p {
    // font-size: 10px;
}

.cinema .movietime {
    width: 100%;
    height: auto;
}

.cinema .movietime .movie-box .movietime-one {
    width: 15%;
    height: 50px;

    margin-left: 10px;
    line-height: 50px;
    text-align: center;
}

.cinema .movietime .movie-box .movietime-two {
    width: 30%;
    height: 50px;
    text-align: center;

}

.cinema .movietime .movie-box .movietime-two p:nth-child(1) {
    margin-bottom: 10px;
    margin-top: 8px;
    color: red;
    font-size: 10px;
}

.cinema .movietime .movie-box .movietime-two p:nth-child(2) {
    font-size: 10px;
    color: grey;
    text-overflow: ellipsis;

    display: -webkit-box;
    /** 对象作为伸缩盒子模型显示 **/

    -webkit-box-orient: vertical;
    /** 设置或检索伸缩盒对象的子元素的排列方式 **/

    -webkit-line-clamp: 2;
    /** 显示的行数 **/

    overflow: hidden;
    /** 隐藏超出的内容 **/
}

.cinema .movietime .movie-box .movietime-three {
    width: 40%;
    height: 50px;
    text-align: center;
    position: relative;
}

.cinema .movietime .movie-box .movietime-three p:nth-child(1) {
    color: red;
    margin-top: 5px;
    font-size: 18px;
}

.cinema .movietime .movie-box .movietime-three p:nth-child(2) {
    margin-top: 9px;
    font-size: 10px;
    color: grey;
}

.cinema .movietime .movie-box .movietime-three p:nth-child(1) span:nth-child(1) {
    background-color: orange;
    border: 1px solid orange;
    position: relative;
    color: aliceblue;
    font-size: 3px;
    top: 5px;
}

.cinema .movietime .movie-box .movietime-three p:nth-child(1) span:nth-child(2) {
    border: 1px solid orange;
    color: orange;
    position: relative;
    font-size: 3px;
    top: 5px;
}

.cinema .movietime .movie-box .movietime-four {
    width: 15%;
    height: 50px;
    text-align: center;
    line-height: 25px;
    font-size: 10px;
    margin-top: 10px;
    margin-right: 5px;
}

.cinema .movietime .movie-box .movietime-four p {
    width: 50px;
    height: 24px;
    border-radius: 12px;
    color: red;
    margin-right: 5px;
    border: 1px solid red;
    margin-top: 4px;

}
</style>
